import '../../css/aboutUs/index.scss'
import bg1 from '../../assets/image/aboutUs/bg1.png'
import bg2 from '../../assets/image/aboutUs/bg2.png'
import bg3 from '../../assets/image/aboutUs/bg3.png'
import bg4 from '../../assets/image/aboutUs/bg4.png'
import bg5 from '../../assets/image/aboutUs/bg5.png'
import Layout from "../../components/layout";
import utils from '../../utils/index';

export default class Index extends React.PureComponent{
    constructor(props){
        super(props);
        this.listArr = [
            {
                title:'1.学习能力',
                img:bg1,
                content:<p className={'third-container-inner-list-item-text'}>
                    主动阅读能力，对世界保持好奇，<br/>
                    终身学习的成长心态。</p>
            },
            {
                title:'2.沟通协作能力',
                img:bg2,
                content:<p className={'third-container-inner-list-item-text'}>
                    良好的倾听、理解、表达及协作能力，<br/>
                    拥有团队意识。</p>
            },
            {
                title:'3.创造力',
                img:bg3,
                content:<p className={'third-container-inner-list-item-text'}>
                    打破常规，敢于探索实践，<br/>
                    产生新思想，创造新事物。</p>
            },
            {
                title:'4.批判性思维',
                img:bg4,
                content:<p className={'third-container-inner-list-item-text'}>
                    求知、求真、开放又系统的认知思维，<br/>
                    证伪求真精神。</p>
            },
            {
                title:'5.审美力',
                img:bg5,
                content:<p className={'third-container-inner-list-item-text'}>
                    道德根基上的美学基础，<br/>
                    事物对立与统一的审美情趣。</p>
            },
        ]
    }
    componentDidMount(){
        // this.domEvent();
    }
    domEvent(){
		$(window).scroll(function(){
			let content1 = utils.getViewPort("content1");
			if(content1){
				$("#content1").addClass("flipInY");
			}
		})
	}
	componentWillUnmount(){
		$(window).unbind ('scroll');
	}
    render(){
        return(
            <Layout nav = "aboutUs" {...this.props} >
                <div className={'about-us'}>
                    <div className={'top-background'}>
                        <p className = "vivify duration-1000 " id = "content1">我们希望孩子在豆壳的缤纷课堂里，收获全方位的成长</p>
                    </div>
                    <div className={'second-container'}>
                        <div className={'second-container-inner'}>
                            <div className={'green-tab'} />
                            <p className={'second-container-inner-title'}>
                            豆壳教育广场的使命
                            </p>
                            <p className={'second-container-inner-content'}>
                            豆壳教育广场是虎鲸文创集团旗下首个战略项目。<br/>
                            豆壳教育广场是城市的文化地标，以孩子为中心，家庭为单元，集全门类教育与家庭陪伴成长为一体，<br/>
                            轻休闲、轻娱乐的一站式学习、社交、健康共享中心，提供学科优选服务，配套定制化的陪伴成长服务。<br/>
                            面向全球筛选优质教育品牌，将超预期的品质课程带入更多家庭，我们希望孩子在豆壳教育广场的缤纷课堂里，收获全方位的成长。
                            </p>
                        </div>
                    </div>
                    <div className={'third-container'}>
                        <div className={'third-container-inner'}>
                            <div className={'green-tab'} />
                            <div className={'second-container-inner-title'}>
                                豆壳的教育理念
                            </div>
                            <div className={'second-container-inner-content'}>
                                <p className={'third-container-inner-content'}>
                                <span className={'bolder-text'}>培养<span className={'green-text'}>面向未来</span>的孩子。</span></p>

                                <p>豆壳关心孩子的现在，更关心他的未来。我们希望培养的孩子都能成为内心丰盈、积极行动的未来公民，基于此，豆壳重视以下<span style = {{color:"#26b597"}}>5项</span>核心能力的培养：</p>
                            </div>
                            <div className={'third-container-inner-list'}>
                                {
                                    this.listArr.map((item,index)=>{
                                        return <div key={index} className={'third-container-inner-list-item'} style={{marginBottom:index != this.listArr.length -1 ? 55 :0}}>
                                            <img src={item.img} className={'third-container-inner-list-img'} />
                                            <div className={'third-container-inner-list-item-right'}>
                                                <p className={'third-container-inner-list-item-title'}>{item.title}</p>
                                                {item.content}
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div className={'bottom-container'}>
                        <div className={'bottom-background'}>
                            <div className={'bottom-background-text'}>
                                <div className={'green-tab'} style={{marginBottom:36}} />
                                我们拥有对孩子教育成长的共同愿望，因此我们向您发出诚挚的邀请，<br/>
                                以「豆壳」之名，创造真正的缤纷课堂，培养出面向未来的孩子
                            </div>
                        </div>

                    </div>
                </div>

            </Layout>
        )
    }
}